<template>
  <div class="region-cascader">
    <div class="region-input" @click="showDropdown = true">
      <span v-if="selectedPath.length" class="region-selected-text">
        {{ selectedPath.join(' / ') }}
      </span>
      <span v-else class="region-placeholder">请选择地区</span>
      <span class="region-arrow">▼</span>
    </div>
    <div v-if="showDropdown" class="region-dropdown" @click.stop>
      <ul v-if="tree && tree.length">
        <li v-if="!$parent || !$parent.tree">
          <span class="region-node" @click="onSelectAllCurrentLevel">全部地区</span>
        </li>
        <li v-for="node in tree" :key="node.name" style="margin-bottom: 4px;">
          <span
            :class="['region-node', selectedPath.includes(node.name) ? 'selected' : '']"
            @click="onNodeClick(node)">
            {{ node.name }}
          </span>
          <RegionCascader
            v-if="expandedNode === node.name && node.children && node.children.length"
            :tree="node.children"
            :selected="selectedPath"
            @select="$emit('select', $event)"
          />
        </li>
      </ul>
    </div>
    <div v-if="showDropdown" class="region-mask" @click="showDropdown = false"></div>
  </div>
</template>

<script>
export default {
  name: 'RegionCascader',
  props: {
    tree: { type: Array, required: true },
    selected: { type: Array, default: () => [] }
  },
  emits: ['select'],
  data() {
    return {
      expandedNode: null,
      selectedPath: [...this.selected],
      showDropdown: false
    }
  },
  watch: {
    selected(val) {
      this.selectedPath = [...val]
    }
  },
  methods: {
    onSelectAllCurrentLevel() {
      // 选中当前级“全部”，路径只到上一级
      if (this.tree && this.tree.length) {
        let parentPath = this.selectedPath.length > 1 ? this.selectedPath.slice(0, -1) : []
        this.selectedPath = [...parentPath]
        this.$emit('select', [...this.selectedPath])
        this.showDropdown = false
      }
    },
    onNodeClick(node) {
      if (node.children && node.children.length) {
        this.expandedNode = node.name
        // 路径只保留到当前级，切换同级时清除下级
        const idx = this.selectedPath.indexOf(node.name)
        if (idx === -1) {
          let parentIdx = this.selectedPath.length > 0 ? this.selectedPath.length - 1 : 0
          this.selectedPath = [...this.selectedPath.slice(0, parentIdx), node.name]
        } else {
          this.selectedPath = this.selectedPath.slice(0, idx + 1)
        }
        // 触发筛选，返回当前路径（父级）
        this.$emit('select', [...this.selectedPath])
      } else {
        // 叶子节点，选中并返回完整路径
        let path = [...this.selectedPath]
        if (!path.length || path[path.length - 1] !== node.name) {
          path = [...path.slice(0, -1), node.name]
        }
        this.selectedPath = path
        this.$emit('select', [...this.selectedPath])
        this.showDropdown = false
      }
    }
  }
}
</script>

<style scoped>
.region-cascader {
  position: relative;
  display: inline-block;
  width: 100%;
}
.region-input {
  border: 1px solid #00f5ff44;
  background: rgba(26, 35, 61, 0.7);
  border-radius: 6px;
  padding: 8px 32px 8px 12px;
  min-height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
}
.region-selected-text {
  color: #00ffe7;
  font-weight: 500;
}
.region-placeholder {
  color: #93c5fd;
  opacity: 0.7;
}
.region-arrow {
  position: absolute;
  right: 12px;
  color: #00f5ff;
  font-size: 14px;
}
.region-dropdown {
  position: absolute;
  top: 110%;
  left: 0;
  width: 100%;
  background: rgba(26, 35, 61, 0.98);
  border: 1px solid #00f5ff44;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 245, 255, 0.18);
  z-index: 100;
  max-height: 480px;
  min-height: 220px;
  overflow-y: auto;
  padding: 20px 18px 18px 18px;
  margin-top: 6px;
}
.region-node {
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: background 0.2s;
  display: inline-block;
}
.region-node.selected {
  background: #00f5ff22;
  color: #00ffe7;
}
.region-mask {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99;
}
.theme-light .region-input {
  background: #fff !important;
  border: 1px solid #e0e7ef !important;
  color: #222 !important;
}
.theme-light .region-arrow {
  color: #0073e6 !important;
}
.theme-light .region-selected-text {
  color: #0073e6 !important;
}
.theme-light .region-placeholder {
  color: #888 !important;
}
.theme-light .region-dropdown {
  background: #fff !important;
  border: 1px solid #e0e7ef !important;
  box-shadow: 0 8px 32px rgba(0,115,230,0.10) !important;
  color: #222 !important;
}
.theme-light .region-node {
  color: #222 !important;
}
.theme-light .region-node.selected {
  background: #e6f7ff !important;
  color: #0073e6 !important;
}
</style>
